<template>
  <div class="wrap">
    <el-table :data="historys" style="width: 100%" border>
      <el-table-column prop="date" label="时间" width="85" />
      <el-table-column prop="handleType" label="类型" width="70">
        <template #default="{ row }">
          <span>{{ row.handleType === "RENAME" ? "重命名" : "删除" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="75">
        <template #default="{ row }">
          <span class="success" v-if="row.state">成功</span>

          <div v-else>
            <span class="error">
              失败
              <el-tooltip effect="dark" :content="row.message" placement="top">
                <i class="iconfont icon-bangzhu"></i>
              </el-tooltip>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="newPath" label="新的路径" />
      <el-table-column prop="oldPath" label="旧的路径" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
export type FileOperHistoryType = {
  date: string;
  handleType: "REMOVE" | "RENAME";
  message: string;
  newPath: string;
  oldPath: string;
  state: boolean;
};

export type Props = {
  historys: Array<FileOperHistoryType>;
};

const props = withDefaults(defineProps<Props>(), {
  historys: () => []
});
</script>

<style lang="scss" scoped>
.wrap {
  .success {
    color: #67c23a;
  }

  .error {
    font-weight: bold;
    color: #f56c6c;
    cursor: pointer;
  }
}
</style>
